<template>
  <div>
    <!-- 面包屑导航 -->
    <el-header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <!-- 主体部分 -->
    <el-card>
      <!-- 添加分类按钮 -->
      <el-row>
        <el-button type="primary" @click="addCategoryShow">添加分类</el-button>
      </el-row>

      <!-- 表格区域 -->
      <tree-table :data="indexData" empty-text="暂无数据" border
                  :columns="columns" :show-row-hover="false"
                  :selection-type="false" :expand-type="false"
                  show-index index-text="" class="tree-table">
        <!-- 级别列 -->
        <!-- 在this.columns中设置该列的template 然后用slot插入 -->
        <template slot="level-column" slot-scope="scope">
          <el-tag v-if="scope.row.level === 1">一级</el-tag>
          <el-tag v-else-if="scope.row.level === 2" type="success">二级</el-tag>
          <el-tag v-else type="warning">三级</el-tag>
        </template>
        <!-- 操作列 -->
        <template slot="tools-column" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit"
                     size="mini" @click="setCategoryClick(scope.row)">编辑
          </el-button>
          <el-button type="danger" icon="el-icon-delete"
                     size="mini" @click="setCategoryDelClick(scope.row)">删除
          </el-button>
        </template>
      </tree-table>

      <!-- 分页区域 -->
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[3, 5, 7, 10]"
              :page-size="num"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
    </el-card>

    <!-- 添加分类弹出框 -->
    <el-dialog
            title="添加分类"
            :visible.sync="addCategoryVisible"
            width="30%" @close="addCategoryDialogClose">
      <!-- 添加分类表单 -->
      <el-form ref="addCategoryForm" :model="addCategoryForm"
               label-width="85px" :rules="addCategoryFormRules">
        <!-- 分类名称输入框 -->
        <el-form-item label="分类名称:" prop="name">
          <el-input v-model="addCategoryForm.name"></el-input>
        </el-form-item>
        <!-- 父分类选择框 -->
        <el-form-item label="父分类:">
          <el-cascader v-model="addCategoryForm.pid" :options="cascaderData"
                       :props="cascaderProps" clearable ref="cascaderSelect"
                       @change="changeSelect" placeholder="根分类">
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCategoryVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategorySubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改分类弹出框 -->
    <el-dialog
            title="编辑分类"
            :visible.sync="setCategoryDialogVisible"
            width="30%" @close="">
      <el-form label-width="85px">
        <el-form-item label="分类名:">
          <el-input :maxlength="15" v-model="setCategoryForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setCategoryDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setCategorySubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Categories',
  data() {
    return {
      // 表格总数据
      'tableData': [],
      // 表格组件设置每列信息
      'columns': [
        {
          label: '分类名称',
          prop: 'name'
        },
        {
          label: '级别',
          type: 'template',
          template: 'level-column'
        },
        {
          label: '操作',
          type: 'template',
          template: 'tools-column'
        }
      ],
      // 当前展示第page页数据
      'page': 1,
      // 一页num条数据
      'num': 3,
      // 是否显示添加分类弹出框
      addCategoryVisible: false,
      // 是否显示修改分类弹出框
      setCategoryDialogVisible: false,
      // 添加分类表单验证规则
      addCategoryFormRules: {
        'name': [
          { required: true, message: '分类名称不能为空', trigger: 'blur' },
          { max: 15, message: '最大不超过15个字符', trigger: 'blur' }
        ]
      },
      // 添加分类的表单数据
      addCategoryForm: {
        // 分类名
        name: '',
        // 父分类，默认父分类为根
        pid: 0,
        // 要添加的分类的级别
        level: 1
      },
      // 修改分类的表单数据
      setCategoryForm: {
        id: 0,
        name: ''
      },
      // 添加分类弹出框中 父分类选择器配置
      cascaderProps: {
        // 子页面何时触发 有click和hover
        expandTrigger: 'hover',
        // 显示的值
        label: 'name',
        // 选中获取的值
        value: 'id',
        // 获取的是该节点的值还是节点路径值的数组
        emitPath: false,
        // 设置为true可以选择任意节点(不设置只能选择叶子节点)
        checkStrictly: true
      }
    }
  },
  computed: {
    // 获取当前页面数据(从总数据tableData中切取)
    indexData() {
      // 数组复制 防止切片更改原数组
      let arr = JSON.parse(JSON.stringify(this.tableData))
      let page = this.page
      let num = this.num
      let arr1 = arr.slice((page - 1) * num, page * num)
      // 如果当前页为空，则切换到前一页
      if (!arr1.length && page !== 1){
        page--
        arr1 = arr.slice((page - 1) * num, page * num)
        this.page = page
      }
      return arr1
    },
    // 总数据数量
    total() {
      return this.tableData.length
    },
    // el-cascader 中的父数据(去除level为3的节点)
    cascaderData() {
      // 列表复制
      let newData = JSON.parse(JSON.stringify(this.tableData))
      for (let item of newData) {
        for (let item1 of item.children)
          item1.children = undefined
        if (!item.children.length)
          item.children = undefined
      }
      return newData
    }
  },
  methods: {
    async getTableData() {
      let { data: res } = await this.$ajax.get('categories/')
      if (res.status === 'success') {
        this.tableData = res.data
        this.$message.success('获取分类数据成功')
      } else
        this.$message.error('获取分类数据失败')
    },
    // 分页num数改变时调用
    handleSizeChange(num) {
      this.num = num
    },
    // 分页page改变时调用
    handleCurrentChange(index) {
      this.page = index
    },
    // 添加分类按钮点击事件
    addCategoryShow() {
      // 显示添加分类弹出框
      this.addCategoryVisible = true
    },
    // 选中节点改变时调用
    changeSelect() {
      // 获取选中节点
      let node = this.$refs.cascaderSelect.getCheckedNodes()
      let level
      // 如果选中节点为空，则说明挂在根下，等级为1
      if (!node.length)
        level = 1
      else// 否则等级为选中节点等级+1
        level = node[0].data.level + 1
      this.addCategoryForm.level = level
      // 防止点击清空按钮时，pid被重置为null
      if (!this.addCategoryForm.pid)
        this.addCategoryForm.pid = 0
    },
    // 提交添加分类表单
    addCategorySubmit() {
      this.$refs.addCategoryForm.validate().then(async valid => {
        if (!valid) return
        let { data: res } = await this.$ajax.post('categories/add/',
                this.$ajax.stringify(this.addCategoryForm))
        if (res.status === 'success') {
          this.tableData = res.data
          this.$message.success('添加分类成功')
          this.addCategoryVisible = false
        } else
          this.$message.error('添加分类失败')
      }).catch(err => err)
    },
    // 添加分类弹出框关闭时的操作
    addCategoryDialogClose() {
      // 重置数组
      this.$refs.addCategoryForm.resetFields()
      // 清空节点
      this.addCategoryForm.pid = 0
      this.addCategoryForm.level = 1
    },
    // 点击编辑分类按钮时调用
    setCategoryClick(categoryInfo) {
      this.setCategoryForm.id = categoryInfo.id
      this.setCategoryForm.name = categoryInfo.name
      this.setCategoryDialogVisible = true
    },
    // 提交修改分类表单
    async setCategorySubmit() {
      let { data: res } = await this.$ajax.post('categories/set/',
              this.$ajax.stringify(this.setCategoryForm))
      if (res.status === 'success') {
        this.tableData = res.data
        this.setCategoryDialogVisible = false
        this.$message.success('修改分类成功')
      } else
        this.$message.error('修改分类失败')
    },
    // 获取要删除的id
    getDelId(categoryInfo) {
      let children = categoryInfo.children
      let list = [categoryInfo.id]
      if (children)
        for (let item of children) {
          list.push(item.id)
          if (item.children)
            for (let item1 of item.children)
              list.push(item1.id)
        }
      return list
    },
    // 删除分类时调用
    setCategoryDelClick(categoryInfo) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let { data: res } = await this.$ajax.post('categories/del/',
                { id: this.getDelId(categoryInfo) })
        if (res.status === 'success') {
          this.tableData = res.data
          this.$message.success('删除分类成功')
        } else
          this.$message.error('删除分类失败')
      }).catch(err => err)
    }
  },
  created() {
    this.getTableData()
  }
}
</script>

<style scoped>
.el-header {
  display: flex;
  align-items: center;
}

.el-pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.tree-table {
  margin-top: 15px;
}
</style>